<template>
  <!-- 用于文本显示框和输入框的转换 -->
  <!--  例：<TextInputSwitch :data="peopleForm" index="rName" /> -->
  <span class="tis">
    <span v-if="!isEdit" @click="showEdit()">
      {{ main }}
      <span v-if="!main" style="color:#999;">{{ textPlaceholder }}&nbsp;</span>
    </span>
    <el-input v-if="isEdit" v-model.trim="main" @blur="isEdit = false" @keyup.enter="isEdit = false" ref="editDom"
      :placeholder="placeholder" />
  </span>
</template>

<script>
import { computed, watch, nextTick } from 'vue'

export default {
  setup(props) {
    const isEdit = ref(false)
    const editDom = ref(null)

    // 显示对应的编辑器
    const showEdit = (isFocus) => {
      isEdit.value = true
      nextTick(() => {
        editDom.value.focus()
        // isFocus用于性别下拉可以直接出现，再通过下拉的隐藏和显示来控制编辑器的隐藏显示
        // if (isFocus) { document.getElementById(str).click() }  // 用于展开
      })
    }

    // 编辑模式改变时要干的事
    watch(isEdit, (newValue) => {
      if (!newValue) {// 当推出编辑时
        console.log(props.data)

      }
    })


    let main = computed({
      get() {
        if (!props.index) return props.data
        // return eval('props.data.' + '"' + props.index + '"')  // 弊端是不能用纯数字作为键
        let data = props.data
        for (const value of props.index.split('.')) {
          data = data[value]
        }
        return data
      },
      set(value) {
        if (!props.index) {
          props.data = value
          return;
        }
        // 仅用于字符串数据
        eval('props.data.' + props.index + '="' + value.toString() + '"')
      }
    })

    return {
      main, isEdit, editDom, showEdit
    };
  },
  // data:Proxy:响应对象，index:String：对象里面的数据项
  // placeholder:String input为空的提示信息
  // textPlaceholder: 数据项为空的时候，span中显示的东西
  props: ['data', 'index', 'placeholder', 'textPlaceholder']
};
</script>

<style scoped>
.tis {
  display: inline-block;
}

.tis>span {
  /* border: 1px solid red; */
  display: inline-block;
  min-width: 100px
}
</style>